import React, { useEffect, useState } from 'react'
import styles from './css/showConsumer.less'
import { useDispatch, useSelector } from "umi"
import { Select, Form, Input, Button, message, Radio, Table } from 'antd';
import { IUserName, Identity, Apiauthority, identityApis, getViewAuthorityss,identityViewAuthorityRelations } from '@/utils/interface';
const watchPeple: React.FC = () => {
    const [form] = Form.useForm();
    type LayoutType = Parameters<typeof Form>[0]['layout'];
    const [formLayout, setFormLayout] = useState<string>('用户数据');
    //getViewAutHoritys
    const {
        userList,
        identitys,
        apiauthoritys,
        identityApis,
        getViewAutHorityss,
        identityViewAuthorityRelationsa
    } = useSelector(module => (module as {
        people: {
            userList: IUserName[],
            identitys: Identity[],
            apiauthoritys: Apiauthority[],
            identityApis: identityApis[],
            getViewAutHorityss: getViewAuthorityss[]
            identityViewAuthorityRelationsa:identityViewAuthorityRelations[]
        }
    }).people)
    const onFormLayoutChange = ({ layout }: { layout: string }) => {
        setFormLayout(layout);
        if (layout === '用户数据') {
            dispatch({
                type: 'people/getUser'
            })
        } else if (layout === '身份数据') {
            dispatch({
                type: 'people/Identity'
            })
        } else if (layout === 'api接口权限') {
            dispatch({
                type: 'people/apiAuthority'
            })
        } else if (layout === '身份和api接口关系') {
            dispatch({
                type: 'people/identityApi'
            })
        } else if (layout === '试图接口权限') {
            dispatch({
                type: 'people/getViewAutHoritys'
            })
        } else if (layout === '身份和试图权限关系') {
            dispatch({
                type: 'people/identityViewAuthorityRelationsa'
            })
        }

    };

    const columns1 = [
        {
            title: '用户名',
            dataIndex: 'user_name',
            key: 'user_name',
        },
        {
            title: '密码',
            dataIndex: 'user_pwd',
            key: 'user_pwd',
        },
        {
            title: '身份',
            dataIndex: 'identity_text',
            key: 'identity_text',
        },
    ];
    const columns2 = [

        {
            title: '身份名称',
            dataIndex: 'identity_text',
            key: 'identity_text',
        },
    ];

    const columns3 = [

        {
            title: 'api接口名称',
            dataIndex: 'api_authority_text',
            key: 'api_authority_text',
        },
        {
            title: 'api权限url',
            dataIndex: 'api_authority_url',
            key: 'api_authority_url',
        },
        {
            title: 'api权限方法',
            dataIndex: 'api_authority_method',
            key: 'api_authority_method',
        },
    ];

    const columns4 = [

        {
            title: '身份名称',
            dataIndex: 'identity_text',
            key: 'identity_text',
        },
        {
            title: 'api权限名称',
            dataIndex: 'api_authority_text',
            key: 'api_authority_text',
        },
        {
            title: 'api权限url',
            dataIndex: 'api_authority_url',
            key: 'api_authority_url',
        },
        {
            title: 'api权限方法',
            dataIndex: 'api_authority_method',
            key: 'api_authority_method',
        },
    ];

    const columns5 = [
        // view_authority_id: "r50r9t-1p1kbm"
        // view_authority_text: "登录"

        {
            title: '试图权限名称',
            dataIndex: 'view_authority_text',
            key: 'view_authority_text',
        },
        {
            title: '视图id',
            dataIndex: 'view_id',
            key: 'view_id',
        },

    ];

    const columns6 = [

        {
            title: '身份',
            dataIndex: 'identity_text',
            key: 'identity_text',
        },
        {
            title: '视图名称',
            dataIndex: 'view_authority_text',
            key: 'view_authority_text',
        },
        {
            title: '视图id',
            dataIndex: 'view_id',
            key: 'view_id',
        },

    ];
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch({
            type: 'people/getUser'
        })
    }, [])
    return <div className={styles.wrap}>
        <h2>用户展示</h2>
        <Form onValuesChange={onFormLayoutChange} initialValues={{ layout: formLayout }} form={form} >
            <Form.Item name='layout'>
                <Radio.Group value={formLayout} >
                    <Radio.Button value="用户数据" className={styles.radio}>用户数据</Radio.Button>
                    <Radio.Button value="身份数据" className={styles.radio}>身份数据</Radio.Button>
                    <Radio.Button value="api接口权限" className={styles.radio}>api接口权限</Radio.Button>
                    <Radio.Button value="身份和api接口关系" className={styles.radio}>身份和api接口关系</Radio.Button>
                    <Radio.Button value="试图接口权限" className={styles.radio}>试图接口权限</Radio.Button>
                    <Radio.Button value="身份和试图权限关系" className={styles.radio}>身份和试图权限关系</Radio.Button>
                </Radio.Group>
            </Form.Item>
        </Form>
        <h1>{formLayout}</h1>
        {
            formLayout === '用户数据' && <Table dataSource={userList} columns={columns1} />
        }
        {
            formLayout === '身份数据' && <Table dataSource={identitys} columns={columns2} />
        }
        {
            formLayout === 'api接口权限' && <Table dataSource={apiauthoritys} columns={columns3} />
        }
        {
            formLayout === '身份和api接口关系' && <Table dataSource={identityApis} columns={columns4} />
        }
        {
            formLayout === '试图接口权限' && <Table dataSource={getViewAutHorityss} columns={columns5} />
        }
        {
            formLayout === '身份和试图权限关系' && <Table dataSource={identityViewAuthorityRelationsa} columns={columns6} />
        }

    </div>
}
export default watchPeple